<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="${mybasePath}assets/jquery/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="${mybasePath}assets/echart/echarts.min.js"></script>
    <jsp:include page="../include/headtag.jsp" />
    <!-- <link rel="stylesheet"
        href="http://fonts.googleapis.com/css?family=Roboto:400,100,300,500"> -->

</head>
<body>
<div>
    <h4>数据统计23
    </h4>
</div>
<div class="panel panel-default forie8"
     style="width: 80%; margin-bottom: 0px;">
    <div class="panel-body" style="padding-bottom: 0px;padding-top:10px">
        <form class="form-inline">
            <div class="form-group forie8" style="height: 50px;margin-left:28px">
                <%--这里是一些查询条件省略了, 主要看下面折线图部分--%>
            </div>
            <br>
        </form>
    </div>
</div>

<%--折线图--%>
<div id="main" class="col-md-12" style="width: 800px; height: 500px; margin-top: 10px"></div>

<script type="text/javascript">
    // 注掉的部分是简单的理解和静态demo, 后面没注掉的部分是从后端动态获取数据展示
    // 我的理解是(不一定对): 下面myChart、option相当于一个类以及属性;  下面myChart.setOption(option); 则是创建了一个实例对象使用
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    //数据
    var XName = [<c:forEach var="item" items="${test}">
        "${item}",
        </c:forEach> ];
    var data1 = [<c:forEach var="item" items="${test1}">
        ${item},
        </c:forEach> ];


    var data = [{
        coords: [
            ['周一', 67],
            ['周二', 97],
            ['周三', 51],
            ['周四', 338],
            ['周五', 32],
            ['周六', 11],
            ['周日', 1],
        ]
    }]

    option = {
        backgroundColor: '#0e2147',
        grid: {
            left: '5%',
            top: '5%',
            bottom: '5%',
            right: '5%',
        },
        legend: {
            type: "scroll",
            data: "来电量",
            itemWidth: 18,
            itemHeight: 12,
            textStyle: {
                color: "#00ffff",
                fontSize: 14
            },
        },
        yAxis: [{
            type: 'value',
            position: 'left',
            nameTextStyle: {
                color: '#00FFFF'
            },
            splitLine: {
                lineStyle: {
                    type: 'dashed',
                    color: 'rgba(135,140,147,0.8)'
                }
            },
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                formatter: '{value}',
                color: '#fff',
                fontSize: 14
            }
        }, ],
        xAxis: [{
            type: 'category',
            axisTick: {
                show: false
            },
            axisLine: {
                show: false,
                lineStyle: {
                    color: '#0696f9',
                }
            },
            axisLabel: {
                inside: false,
                textStyle: {
                    color: '#fff', // x轴颜色
                    fontWeight: 'normal',
                    fontSize: '14',
                    lineHeight: 22
                }

            },
            data: XName,
        }, ],
        series: [{
            symbolSize: 10,

            name: '小灯光',
            type: "line",
            data: data1,
            itemStyle: {
                normal: {
                    borderWidth: 5,
                    color: '#0696f9',
                }
            }
        },
            {
                name: '滑行的光点',
                type: 'lines',
                coordinateSystem: 'cartesian2d',
                symbolSize: 30,
                polyline: true,
                effect: {
                    show: true,
                    trailLength: 0,
                    symbol: "arrow",
                    period: 10, //光点滑动速度
                    symbolSize: 10,

                },
                lineStyle: {
                    normal: {
                        width: 1,
                        opacity: 0.6,
                        curveness: 0.2
                    }
                },
                data: data
            }
        ],
    };



    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }




</script>
</body>

</html>
